<template>
  <div class="topic-1 all-bj">
    <div class="content">
      <div class="bj">
        <div class="title">
          <p>{{list.question}}</p>
        </div>
        <div class="info">
          <ul>
            <li v-for="(item,key) in list.selItems" :key="key">
              <input type="radio"  v-model="radioValue" :value="item.id"  @click="radioClick(item.id)">
              <p  :class="{optionbg_click : item.id == radioValue}" ><span>{{key}} {{item.title}}</span></p>
              <!--<input type="button" v-model="radioValue" :value="item" @click="radioClick(item)" >-->
            </li>
            <div class="clearfix"></div>
          </ul>
        </div></div>
    </div>
    <div class="btn">
      <a @click="previous('/Topic_4')"></a>
      <a @click="dave()"></a>
    </div>
    <div class="bottom-img">
    </div>
    <div class="success-loading"  v-show="loading">
      <div class="info">
        <div class="info-img">
          <img src="../../assets/img/button_status/search.gif" alt="">
        </div>
        <p>正在努力查询中<i class="loading">...</i></p>
      </div>
    </div>
    <div class="error-loading" v-show="err">
      <div class="info">
        <div class="info-img">
          <img src="../../assets/img/button_status/window_fail@2x.png" alt="">
        </div>
        <p>请重新提交</p>
        <!--<button @click="errClick">确认</button>-->
        <div class="btn" @click="errClick"><img src="../../assets/img/button_status/btn_ok@2x.png" alt=""></div>
      </div>
    </div>
    <div class="alert" v-if="alertType">
      <div class="alert_content"><p>请选择一个选项<br>以便帮您更准确的选酒哦</p><span @click="alertType = false"><img src="../../assets/img/button_status/ic_close@2x.png" alt=""></span></div>
      <div class="alert_bottom"><a @click="alertType = false"></a></div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      err: false,
      loading: false,
      list: '',
      radioValue: '',
      options: '',
      alertType: false,
      locationData: ''
    }
  },
  methods: {
    errClick () {
      this.err = false
    },
    radioClick (value) {
      const obj = JSON.parse(sessionStorage.getItem('options'))
      obj.价格 = {money: value}
      sessionStorage.setItem('options', JSON.stringify(obj))
    },
    dave () {
      if (this.radioValue !== '') {
        this.logs('提交') // 发送日志
        this.loading = true
        const options = JSON.parse(sessionStorage.getItem('options'))
        const data = {}
        const arr1 = []
        const arr2 = []
        for (let i in options) {
          if (i !== '价格') {
            arr1.push(options[i].value)
          } else {
            arr2.push(options[i].money)
          }
        }
        data.scene_food_id = arr1
        data.price_range = arr2
        const params = JSON.stringify(data)
        const url = `${location.protocol}//recomm.9kacha.com/intelligenceSelWine.php`
        this.$ajax.post(url, params).then(res => {
          if (res.data.status === 0 && res.data.jsonData.length !== 0) {
            sessionStorage.setItem('data', JSON.stringify(res.data.jsonData))
            this.loading = false
            this.$router.push('/success_info')
          } else {
            this.$router.push('/success_null')
          }
        }, err => {
          if (err) {
            this.errClick()
          }
        })
      } else {
        this.alertType = true
      }
    },
    previous (path) {
      this.logs('上一题')
      this.$router.push(path)
    },
    getUrlParam (name, url) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = url.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return ''
    },
    location () {
      const that = this
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          function (position) {
            var longitude = position.coords.longitude
            var latitude = position.coords.latitude
            const str = longitude + ',' + latitude
            that.locationData = str
          },
          function (e) {
            var msg = e.code
            var dd = e.message
            console.log(msg)
            console.log(dd)
          }
        )
      }
    },
    logs (opEvent) {
      const that = this
      const logs = {
        'module': '活动',
        'sub_module': '京东智能选酒',
        'op_event': opEvent,
        'query_column': location.href,
        'source': this.getUrlParam('source', location.href),
        'useragent': navigator.userAgent,
        'geo_location': that.locationData
      }
      const params = JSON.stringify(logs)
      const logsUrl = `${location.protocol}//recomm.9kacha.com/record_log.php`
      this.$ajax.post(logsUrl, params).then(res => {
        console.log(res)
      }, err => {
        console.log(err)
      })
    }
  },
  created () {
    this.list = JSON.parse(sessionStorage.getItem('requestData')).价格
    if (sessionStorage.getItem('options') && JSON.parse(sessionStorage.getItem('options')).价格) {
      this.radioValue = JSON.parse(sessionStorage.getItem('options')).价格.money
    }
    this.location()
  }
}
</script>

<style scoped lang="less">
  @import "../../lib/less/variable.less";
  .topic-1{
    width: 100%;
    height: 100%;
    background: url("../../assets/img/home_slices/bgimage@2x.png") no-repeat center;
    position: absolute;
    top: 0;
    left: 0;
    button:0;
    right: 0;
    .content{
      width: 100%;
      margin: 0 auto;
      text-align: center;
      .pt(25);
      .bj{
        .h(333);
        background: url("../../assets/img/Q5_slices/Q5number@2x.png") no-repeat  center center;
        background-size:contain;
        background-clip: border-box;
        .pt(45);
        .title{
          p{
            .h(36);
            .lh(36);
            display: inline-block;
            width: 78.14%;
            background: url("../../assets/img/button_status/questionbg@2x.png") no-repeat center;
            background-size:contain;
            background-clip: border-box;
            .fs(15);
            color: #553317;
            font-weight: bold;
            font-family: PingFangSC;
            text-align: left;
            .pl(20);
          }
        }
      }
    }
    .info{
      width: 100%;
      ul{
        width: 100%;
        li{
          width: 100%;
          text-align: center;
          margin: auto;
          position: relative;
          .pt(10);
          input[type="radio"] {
            opacity: 0;
            width: 100%;
            .h(30);
            display: inline-block;
            position: absolute;
            left: 0;
            .bottom(0);
          }
          p{
            width: 69.33%;
            display: inline-block;
            .h(36);
            .lh(36);
            background: url("../../assets/img/button_status/optionbg_default@2x.png") no-repeat center;
            background-size:contain;
            background-clip: border-box;
            .fs(14);
            color: #553317;
            font-weight: bold;
            font-family: PingFangSC;
            text-align: left;
          }
          p.optionbg_click{
            background-image: url("../../assets/img/button_status/optionbg_click@2x.png");
          }
          span{
            vertical-align: top;
            .ml(20)
          }
        }

      }
    }
    .btn{
      width: 100%;
      position: relative;
      z-index: 99;
      a{
        .w(120);
        .h(60);
        display: inline-block;
        text-align: center;
        width: 32%;
        position: absolute;
        .top(-30);
        background: url("../../assets/img/button_status/btn_last@2x.png")no-repeat center;
        background-size: contain;
        background-clip: border-box;
      }
      a:first-child{
        .left(50)
      }
      a:last-child{
        .right(50);
        background: url("../../assets/img/button_status/btn_finish@2x.png")no-repeat center;
        background-size: contain;
        background-clip: border-box;
      }
    }
    .bottom-img{
      width: 100%;
      .h(157);
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: url("../../assets/img/Q5_slices/bottomimage_Q5@2x.png") no-repeat bottom center;
      background-size: contain;
    }
    .success-loading{
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      text-align: center;
      background: rgba(0,0,0,0.6);
      z-index: 999;
      .info{
        position: absolute;
        top: 30%;
        text-align: center;
        .info-img{
          margin: 0 auto;
          .w(110);
          .h(110);
          .mb(8);
          img{
            width: 100%;
            object-fit: cover;
          }
        }
        span{
          .fs(50);
          color:#fff
        }
        i{font-style:normal;}
        .loading{
          animation:loading 1s 1s infinite  ;
        }
        @keyframes loading {
          from { opacity: 0}
          to {opacity: 1}
        }
        p{
          color: #fff;
          .fs(20);
          .ml(20);
        }
      }
    }
    .error-loading{
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0,0,0,0.7);
      z-index: 999;
      text-align: center;
      .info{
        position: absolute;
        top: 20%;
        .info-img{
          margin: 0 auto;
          .w(110);
          .h(110);
          .mb(8);
          img{
            width: 100%;
            object-fit: cover;
          }
        }
        span{
          .fs(120);
          font-weight: bold;
        }
        p{
          color: #fff;
          .fs(15);
          .pt(30);
        }
          img{
         width: 32%;
         .mt(25);
         object-fit: cover;
        }
      }
    }
    .alert{
      width: 100%;
      height: 100%;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0,0,0,0.7);
      z-index: 999;
      text-align: center;
      .alert_content{
        .w(282);
        .h(82);
        background: url("../../assets/img/button_status/window_bg@2x.png") no-repeat center;
        background-size:contain;
        background-clip: border-box;
        text-align: center;

        position: relative;;
        top: 30%;
        .left(51);
        p{
          width: 100%;
          .h(82);
          .fs(16);
          .lh(21);
          .pt(20);
        }
        span{
          img{
            .w(36);
            .h(36);
          }
          position: absolute;
          .right(-25);
          top: 0;
        }
      }
      .alert_bottom{
        width: 100%;
        position: relative;
        a{
          display: inline-block;
          text-align: center;
          .w(120);
          position: absolute;
          left: 0;
          .top(250);
          background: url("../../assets/img/button_status/btn_know@2x.png") no-repeat center;
          background-size: cover;
          .h(60);
          left: 50%;
          .ml(-60);
        }
      }
    }
    @media screen and (min-width: 750px) {
      .content{
        .bj{
          .title{
            p{
              .h(36);
              .lh(36);
              .fs(14);
              .pl(70);
            }
          }
        }
      }
      .info{
        ul{
          li{
            p{
              .fs(14);
              .pl(50);
            }
          }

        }
      }
      .btn{
        a{
          img{
            width: 50%;
          }
        }
        a:first-child{
          .left(100)
        }
        a:last-child{
          .right(100)
        }
      }
      .alert{
        .alert_content{
          left: 50%;
          .ml(-141);
        }
        .alert_bottom{
          width: 100%;
          position: relative;
          a{
            img{
              width: 10%;
              object-fit: cover;
            }
          }
        }
      }
    }
  }
</style>
